<template>
    <div class="my-dialog">
        <el-dialog
            v-model="showDialog"
            :width="width"
            @close="onClose"
            :close-on-click-modal="closedM"
            :close-on-press-escape="closedESC"
            :style="dialogStyle"
            :show-close="showClose"
            :fullscreen="fullScreen"
            :align-center="alignCenter"
        >
            <slot></slot>
            <template #header>
                <span class="top-title-box">{{ title }}</span>
                <div v-if="showTopBtns" class="top-btn-box">
                    <el-button @click="onClose"> {{ cancelText || "取消" }}</el-button>
                    <el-button v-if="showOk" type="primary" @click="handleonOk">{{ okText || "确认" }}</el-button>
                </div>
            </template>
            <template #footer>
                <el-button @click="onClose" size="small">{{ cancelText || "取消" }} </el-button>
                <el-button v-if="showOk" type="primary" @click="handleonOk" size="large"> {{ okText || "确认" }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from "vue";

defineOptions({ name: "ComDialog" });

defineProps({
    alignCenter: {
        type: Boolean,
        default: true,
    },
    showTopBtns: {
        type: Boolean,
        default: false,
    },
    fullScreen: {
        type: Boolean,
        default: false,
    },
    title: { type: String, default: "提示" },
    width: {
        type: String,
        default: "500",
    },
    closedM: {
        type: Boolean,
        default: false,
    },
    closedESC: {
        type: Boolean,
        default: false,
    },
    cancelText: String,
    okText: String,
    showOk: {
        type: Boolean,
        default: true,
    },
    showClose: {
        type: Boolean,
        default: true,
    },
    dialogStyle: {
        type: String,
        default: "",
    },
});

const emit = defineEmits(["handleOk", "handleCancel"]);

const handleonOk = () => {
    emit("handleOk");
};
const onClose = () => {
    emit("handleCancel");
};

const showDialog = ref(true);
</script>

<style lang="scss" scoped>
.top-btn-box {
    position: absolute;
    right: 1rem;
    top: 1rem;
}
.top-btn-box :deep(.el-button) {
    line-height: 0.6875rem;
    font-weight: 400;
    font-size: 0.75rem;
}

:deep(.el-dialog) {
    padding: 1rem;
    background-color: azure;
}

:deep(.el-dialog__header) {
    text-align: start;
    padding-bottom: 1rem;
}

:deep(.el-dialog__body) {
    text-align: start;
}

:deep(.el-dialog__footer) {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
}

.top-title-box {
    line-height: 1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    width: 18.75rem;
}
</style>
